<template>
    <div>
        <div>{{ $route.meta.title }}</div>
        <router-link to="/zhiling" tag='button' active-class="active">router-link</router-link><br>
        <!-- 添加一条历史记录 -->
        <button @click="goPush">push</button><br>
        <!-- 替换当前条历史记录 -->
        <button @click="goReplace">replace</button><br>
        <!-- 去第几页 -->
        <button @click="goGo">go</button><br>
        <!-- 回退一页 -->
        <button @click="goBack">back</button><br>
        <!-- 前进一页 -->
        <button @click="goForward">forward</button><br>
        <!-- query -->
        <router-link to="/query?key1=aaa&key2=bbb" tag="button" >link-query</router-link><br>
        <button @click="goQuery">query</button><br>
        <!-- params -->
        <router-link to="/params/aaa/bbb" tag="button">link-params</router-link><br>
        <button @click="goParams">params</button><br>
    </div>
</template>
<script>
import { RouterLink } from 'vue-router'

export default {
    beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter', to);
        console.log('beforeRouteEnter', from);
        next();
    },
    beforeRouteUpdate(to, from, next) {
        console.log('beforeRouteUpdate', to);
        console.log('beforeRouteUpdate', from);
        next();
    },
    beforeRouteLeave(to, from, next) {
        console.log('beforeRouteLeave', to);
        console.log('beforeRouteLeave', from);
        next();
    },
    methods:{
        goPush(){
            this.$router.push('/tongxin')
        },
        goReplace(){
            this.$router.replace('/jiekou')
        },
        goGo(){
            this.$router.go(0)
        },
        goBack(){
            this.$router.go(-1)
        },
        goForward(){
            this.$router.go(1)
        },
        goQuery(){
            this.$router.push({
                path:'/query',
                query:{
                    key1:'111',
                    key2:'222'
                }
            })
        },
        goParams(){
            this.$router.push({
                name: 'params',
                params: {
                    id1: '111',
                    id2: '222'
                }
            })
        }
    }
}
</script>
<style>
.active {
    background: teal;
    color: #fff
}
</style>